<!-- Author:Rain -->

<template>
    <div class="rain-form-item">
        <div class="rain-item-lable">
            <span>{{title}}</span>
        </div>
        <div class="rain-item-content">
            <div tabindex="1" class="rain-target rain-select" @click="choice[type].low.status=!choice[type].low.status">
                <span :class="{'placeholder':choice[type].low.content==''}">{{ choice[type].low.content || choice[type].low.labes }}</span>
                <i class="rain-iconfont">&#xe629;</i>
                <div style="z-index: 1000;" class="rain-drop" v-show="choice[type].low.status">
                    <div @click="select1(option,index)" :class="{'selected':choice[type].low.selectIndex==index}"
                     v-for="option,index in choice[type].low.options" :key="index" class="rain-option">{{option}}</div>
                </div>
            </div>
            <span>-</span>
            <div tabindex="1" class="rain-target rain-select" @click="choice[type].high.status = !choice[type].high.status">
                <span :class="{'placeholder':choice[type].high.content==''}">{{ choice[type].high.content || choice[type].high.labes }}</span>
                <i class="rain-iconfont">&#xe629;</i>
                <div style="z-index: 1000;" class="rain-drop" v-show="choice[type].high.status">
                    <div @click="select2(option,index)" :class="{'selected':choice[type].high.selectIndex==index}"
                     v-for="option,index in choice[type].high.options" :key="index" class="rain-option">{{option}}</div>
                </div>
            </div>
            <span v-show="type=='freshGraduate'">×</span>
            <div v-show="type=='freshGraduate'" tabindex="1" class="rain-target rain-select" @click="choice[type].month.status = !choice[type].month.status">
                <span :class="{'placeholder':choice[type].month.content==''}">{{ choice[type].month.content || choice[type].month.labes }}</span>
                <i class="rain-iconfont">&#xe629;</i>
                <div style="z-index: 1000;" class="rain-drop" v-show="choice[type].month.status">
                    <div @click="select3(option,index)" :class="{'selected':choice[type].month.selectIndex==index}"
                     v-for="option,index in choice[type].month.options" :key="index" class="rain-option">{{option}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="rain-multiply-select">
//维护一下下拉框的状态
let props=defineProps(["title","value","type"])
let emit=defineEmits(["sendSelect"])

const {salary:Val}=toRefs(props.value)
console.log(Val.value);

// 在这里定义几种类型 应届生薪资、实习生日薪、实习生实习天数
//通过类型判断结构
const choice:any=reactive({
    "freshGraduate":{//社招/应届生
        low:{
            status:false,
            selectIndex:-1,
            content:Val?.value.msalaryMin||'',
            labes:"月薪",
            options:Array.from({length:80}).map((_,index)=>index+1+"k")
        },
        high:{
            status:false,
            selectIndex:-1,
            content:Val?.value.msalaryMax||"",
            labes:'月薪',
            options:computed(()=>Array.from({length:10}).map((_,index)=>index+2+choice.freshGraduate.low.selectIndex+"k"))
        },
        month:{
            status:false,
            selectIndex:-1,
            content:Val?.value.numMouth||'',
            labes:"月数",
            options:Array.from({length:19}).map((_,index)=>12+index+"薪")
        }
    },
    "trainee":{//实习生
        low:{
            status:false,
            selectIndex:-1,
            content:Val?.value.dsalaryMin||"",
            labes:"日薪",
            options:Array.from({length:80}).map((_,index)=>(index+1)*10+"元/天")
        },
        high:{
            status:false,
            selectIndex:-1,
            content:Val?.value.dsalaryMax||"",
            labes:'日薪',
            options:computed(()=>Array.from({length:10}).map((_,index)=>(index+2+choice.trainee.low.selectIndex)*10+"元/天"))
        },
        month:{
            status:false,
            selectIndex:-1,
            content:"",
            labes:"月数",
            options:Array.from({length:19}).map((_,index)=>12+index+"薪")
        }
    }
})

function select1(option:string,index:number){
    choice[props.type].low.selectIndex=index
    choice[props.type].low.content=option

    choice[props.type].high.selectIndex=-1
    choice[props.type].high.content=""
    sendMsg()
}
function select2(option:string,index:number){
    choice[props.type].high.selectIndex=index
    choice[props.type].high.content=option
    sendMsg()
}
function select3(option:string,index:number){
    choice[props.type].month.selectIndex=index
    choice[props.type].month.content=option
    sendMsg()
}


//数据是否收集齐
let selectAll=computed(()=>{
    let freshGraduateIsAll=Object.values(choice.freshGraduate).every((item:any)=>{
        return Boolean(item.content)
    })
    let traineeIsAll=Object.values(choice.trainee)
    traineeIsAll.pop()
    let traineeBool=traineeIsAll.every((item:any)=>{
        return Boolean(item.content)
    }) 
    return freshGraduateIsAll || traineeBool
})

//数据发送
function sendMsg(){
    if(selectAll.value){
        //数据收集
        let salarys={
            dsalaryMax:choice.trainee.high.content,
            dsalaryMin:choice.trainee.low.content,
            msalaryMax:choice.freshGraduate.high.content,//应届/社招
            msalaryMin:choice.freshGraduate.low.content,
            numMouth:choice.freshGraduate.month.content
        }
        console.log(salarys);
        emit('sendSelect',salarys)
    }
    return;
}


</script>

<style scoped>
@import url("./css/formitems.css");

.rain-drop{
    animation: slide 0.5s;
    max-height: 300px;  
    overflow: auto;
}
.rain-drop .rain-option.selected{
    color: RGB(31, 182, 180);
}

.rain-item-content span.placeholder{
     color:RGB(159,163,175);
     font-size: 16px;
     font-weight: 400;
}
@keyframes slide {
    to{
        opacity: 1;
    }
    from{
        opacity: 0;
    }
}
.rain-item-content{
    width: 300px;
    display: flex;
    justify-content: space-between;
}
.rain-item-content .rain-select.rain-target{
    flex: 1;
    padding: 5px;
}
.rain-item-content span{
    display: inline-block;
    padding: 0 10px;
}
</style>